<template>
  <view>
    <!-- 所有图片 -->
    <view class="allImages padding">
      <view class="allImages-image" v-for="(item,i) in myList" :key="i">
        <image :src="item.src"></image>
      </view>
    </view>
	
	<!-- 广告区域开始 -->
	<view class="advertising">
		<image class="image" src="../../static/imag/123.png"></image>
	</view>
	<!-- 广告区域结束 -->

    <!-- 点击按钮 -->
    <view class="result">
      <view class="result-btn">
        下载全部
      </view>
      <view class="result-btn">
        分享套路
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        myList: [{
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }, {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg'
        }]
      };
    }
  }
</script>

<style lang="scss">
  // 间距
  .padding {
    padding: 0 30rpx 30rpx;
  }

  .allImages {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .allImages-image {
      width: 210rpx;
      height: 210rpx;
      padding-top: 30rpx;

      image {
        border: 1px solid #F5F5F5;
        border-radius: 16rpx;
      }
    }
  }

  // 点击按钮
  .result {
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;

    .result-btn {
      margin: 0 50rpx;
      width: 180rpx;
      height: 80rpx;
      background-color: #fcbe17;
      text-align: center;
      line-height: 80rpx;
      border-radius: 35rpx;
    }
  }
  
  // 广告区域
  .advertising {
  	margin: 20rpx 30rpx;
  	height: 240rpx;
  
  	.image {
  		border-radius: 16rpx;
  	}
  }
</style>
